<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .li_con {
            list-style: none;
            width: 200px;
            height: 200px;
            /*margin-top: 20px;*/
            /*margin-left: 30px;*/
        }

        .li_con img {
            width: 100%;
            height: 100%;
        }

        .divBox {
            width: 65%;
            height: 650px;
            background: rgba(255, 137, 135, 0.33);
        }

        #divBox {
            width: 30%;
            height: 650px;
            background: rgba(255, 155, 8, 0.43);
        }

        div {
            float: left;
            margin-left: 20px;
            margin-top: 30px;
        }

        @media (max-width: 768px) {
            .divBox, #divBox {
                width: 100%;
            }

            div {
                float: none;
                width: 100%;
            }
        }

        #divBox input {
            margin: 15px 50px;
        }

        .div_con {
            /*float: none;*/
            width: 30px;
            height: 30px;
            background: white;
            margin: 0;
            padding: 0;
            border: 1px solid #000000;
        }
    </style>
    <script src="../../jquery-js/jquery.js"></script>
    <script>
        $(function () {
            $('#divBox input').eq(0).on('click', function () {
                $('.divBox').css({
                    display: 'flex'
                });
                $('.divBox .li_con').css({
                    marginTop: '20px',
                    marginLeft: '30px'
                });
            });

            $('#divBox input').eq(1).on('click', function () {
                $('.divBox').css({
                    display: 'flex',
                    flexFlow: 'row',
                    justifyContent: 'flex-end'
                });
                $('.divBox .li_con').css({
                    marginTop: '20px',
                    marginRight: '30px'
                });
            });

            $('#divBox input').eq(2).on('click', function () {
                $('.divBox').css({
                    display: 'flex',
                    flexFlow: 'row',
                    justifyContent: 'flex-start'
                });
                $('.divBox .li_con').css({
                    marginTop: '20px',
                    marginRight: '30px'
                });
            });

            $('#divBox input').eq(3).on('click', function () {
                $('.divBox').css({
                    display: 'flex',
                    flexFlow: 'row',
                    justifyContent: 'center'
                });
                $('.divBox .li_con').css({
                    margin: '20px 0 0 0'
                });
            });

            $('#divBox input').eq(4).on('click', function () {
                $('.divBox').css({
                    display: 'flex',
                    flexFlow: 'row',
                    justifyContent: 'space-around'
                });
                $('.divBox .li_con').css({
                    marginTop: '20px'
                });
            });

            $('#divBox input').eq(5).on('click', function () {
                $('.divBox').css({
                    display: 'flex',
                    flexFlow: 'row',
                    justifyContent: 'space-between'
                });
                $('.divBox .li_con').css({
                    marginTop: '20px'
                });
            });

            $('#divBox input').eq(6).on('click', function () {
                $('.divBox').css({
                    display: 'flex',
                    flexFlow: 'row',
                    justifyContent: 'center',
                    alignItems: 'center'
                });
                $('.divBox .li_con').css({
                    marginRight: '10px',
                });
                $('.divBox .li_con:last-of-type').css({
                    marginRight: 0
                });
            });

            $('#divBox input').eq(7).on('click', function () {
                $('.divBox').css({
                    display: 'flex',
                    flexFlow: 'row',
                    justifyContent: 'center',
                    alignItems: 'flex-end'
                });
                $('.divBox .li_con').css({
                    marginRight: '10px',
                });
                $('.divBox .li_con:last-of-type').css({
                    marginRight: 0
                });
            });

            $('#divBox input').eq(8).on('click', function () {
                $('.divBox').css({
                    display: 'flex',
                    flexFlow: 'row',
                    justifyContent: 'center',
                    alignItems: 'flex-start'
                });
                $('.divBox .li_con').css({
                    marginRight: '10px',
                });
                $('.divBox .li_con:last-of-type').css({
                    marginRight: 0
                });
            });

            $('#divBox input').eq(9).on('click', function () {
                $('.divBox').css({
                    display: 'flex',
                    flexFlow: 'row',
                    justifyContent: 'center',
                    alignItems: 'center'
                });
                $('.divBox .li_con').css({
                    margin: 0,
                    // width: 0
                });
                $('.divBox .li_con').eq(0).css({
                    order: 2,
                    flex: 1,
                    // flex: '50%'
                });
                $('.divBox .li_con').eq(1).css({
                    order: 3,
                    flex: 1,
                    // flex: '25%',
                    alignSelf: 'flex-end'
                });
                $('.divBox .li_con').eq(2).css({
                    order: 1,
                    flex: 1,
                    // flex: '25%',
                    alignSelf: 'flex-start'
                });
                // $('.divBox .div_con').eq(0).css({
                //     order: 2,
                //     flex: '50%'
                // });
                // $('.divBox .div_con').eq(1).css({
                //     order: 3,
                //     flex: '25%'
                // });
                // $('.divBox .div_con').eq(2).css({
                //     order: 1,
                //     flex: '25%'
                // });
            });
        });

        // $.fn.extend({
        //     djFlex: function (attr) {
        //         this.css('display', attr);
        //         return this;
        //     }
        // });
    </script>
</head>
<body>
<div id="divBox">
    <input type="button" value="点击 disply:flex"/><br>
    <input type="button" value="点击 justifyContent:flex-end"/><br>
    <input type="button" value="点击 justifyContent:flex-start"/><br>
    <input type="button" value="点击 justifyContent:center"/><br>
    <input type="button" value="点击 justifyContent:space-around"/><br>
    <input type="button" value="点击 justifyContent:space-between"/><br>
    <input type="button" value="点击 algin-items:center"/><br>
    <input type="button" value="点击 algin-items:flex-end"/><br>
    <input type="button" value="点击 algin-items:flex-start"/><br>
    <input type="button" value="点击 order"/><br>
</div>
<div class="divBox">
    <li class="li_con"><img src="./img/flex_1.jpeg" alt=""></li>
    <li class="li_con"><img src="./img/flex_2.jpeg" alt=""></li>
    <li class="li_con"><img src="./img/flex_3.jpeg" alt=""></li>
    <!--    <div class="div_con">a</div>-->
    <!--    <div class="div_con">b</div>-->
    <!--    <div class="div_con">c</div>-->
</div>
</body>
</html>